<template>
  <div class="vehicle-usage-container">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="租赁状态跟踪" name="rental">
        <rental-status-tracking v-if="activeTab === 'rental'" ref="rentalStatusTracking"></rental-status-tracking>
      </el-tab-pane>
      <el-tab-pane label="使用数据统计" name="usage">
        <usage-statistics v-if="activeTab === 'usage'" ref="usageStatistics"></usage-statistics>
      </el-tab-pane>
    </el-tabs>
    
    <div class="action-buttons">
      <el-button type="primary" icon="el-icon-document" @click="generateReport">生成报表</el-button>
      <el-button type="success" icon="el-icon-download" @click="exportData">导出数据</el-button>
    </div>
  </div>
</template>

<script>
import RentalStatusTracking from './components/RentalStatusTracking.vue'
import UsageStatistics from './components/UsageStatistics.vue'

export default {
  name: 'VehicleUsage',
  components: {
    RentalStatusTracking,
    UsageStatistics
  },
  data() {
    return {
      activeTab: 'rental'
    }
  },
  methods: {
    handleTabClick() {
      // 切换标签时刷新数据
      this.$nextTick(() => {
        if (this.activeTab === 'rental' && this.$refs.rentalStatusTracking) {
          this.$refs.rentalStatusTracking.fetchData()
        } else if (this.activeTab === 'usage' && this.$refs.usageStatistics) {
          this.$refs.usageStatistics.fetchData()
        }
      })
    },
    generateReport() {
      if (this.activeTab === 'rental' && this.$refs.rentalStatusTracking) {
        // 生成租赁状态报表
        this.$refs.rentalStatusTracking.generateReport()
      } else if (this.activeTab === 'usage' && this.$refs.usageStatistics) {
        // 使用统计数据报表已在组件内实现
        this.$message.info('请使用详情分析或损耗评估功能生成对应报表')
      }
    },
    exportData() {
      if (this.activeTab === 'rental' && this.$refs.rentalStatusTracking) {
        this.$refs.rentalStatusTracking.exportData()
      } else if (this.activeTab === 'usage' && this.$refs.usageStatistics) {
        this.$refs.usageStatistics.exportData()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.vehicle-usage-container {
  padding: 20px;
}

.action-buttons {
  margin-top: 20px;
  text-align: right;
}
</style> 